import React, { Component } from 'react';
import { Spin, Icon } from 'antd';
import Link from 'umi/link';
import { connect } from 'dva';
import { StatusIcon, isBindInfo } from '@/utils';

@connect(({ loading, userCenter: { information } }) => ({
  loading: loading.effects['userCenter/queryUserInformation'],
  information,
}))
class UserInformation extends Component {

  componentDidMount() {
    this.props.dispatch({
      type: 'userCenter/queryUserInformation',
    });
  }

  render() {
    const { loading, information } = this.props;
    //console.log(information)
    // information.e
    // mail = '1136114589@qq.com'
    return (
      <Spin spinning={!!loading}>
        <div style={{ backgroundColor: '#FCFCFC', height: 528, marginTop: 20 }}>
          <p>
            姓名：<span style={{ marginRight: 15,  }}>{information.name}</span>
            {isBindInfo(parseInt(information.status, 0))}
          </p>
          <p>手机：{information.mobile && (information.mobile.substr(0, 3) + '****' + information.mobile.substr(7, 11))} <Link to="/userCenter/editPhone">修改</Link></p>
          <p>邮箱：{
              information.email ?
                <span>
                  <StatusIcon status="success" text={information.email} /> <Link to="/userCenter/editEmail">修改</Link>
                </span>
                :
                <span>
                  <StatusIcon status="fail" text="尚未绑定邮箱" /> <Link to="/userCenter/bindEmail">绑定</Link>
                </span>
            }

          </p>
          <p>
            密码： <Link to="/userCenter/editPassword">修改</Link>
          </p>
        </div>

      </Spin>
    );
  }
}

export default UserInformation;
